import { useEffect } from 'react'
import { View, Animated } from 'react-native'
import { createStyles, useStyles } from '@mf2e/react-native-theme-styles'
import mnb from '@mf2e/mnb'
import { appEnv } from '@/utils/inject'

const BaseNav = ({ style, children, statusBarMode, navStyle, navOpacity, navBack, navMore }) => {
  const styles = useStyles(themeStyles)

  useEffect(() => {
    mnb('app.setStatusBar', { mode: statusBarMode || 'dark' })
  }, [statusBarMode])

  return (
    <View style={[styles.BaseNav, style]}>
      <Animated.View style={[styles.nav, navStyle, { opacity: navOpacity }]}>{children}</Animated.View>
      <View style={styles.back}>{navBack}</View>
      <View style={styles.more}>{navMore}</View>
    </View>
  )
}

const themeStyles = createStyles({
  BaseNav: {
    width: '100%',
  },
  nav: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: appEnv.statusBarHeight + appEnv.navBarHeight,
    paddingTop: appEnv.statusBarHeight,
  },
  back: {
    justifyContent: 'center',
    position: 'absolute',
    top: appEnv.statusBarHeight,
    left: 12,
    height: appEnv.navBarHeight,
  },
  more: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: appEnv.statusBarHeight,
    right: 12,
    height: appEnv.navBarHeight,
  },
})

export default BaseNav
